<template>
  <div class="guide-page">
    <h1>旅游攻略</h1>
    <div v-if="posts.length === 0" class="no-data">
      暂无攻略文章
    </div>
    <div v-else class="post-grid">
      <div v-for="post in posts" :key="post.id" class="post-card" @click="goToDetail(post.id)">
        <div class="post-cover">
          <img :src="post.coverImage" :alt="post.title">
        </div>
        <div class="post-info">
          <h3>{{ post.title }}</h3>
          <div class="post-meta">
            <span class="city">{{ post.city }}</span>
            <span class="category">{{ post.category }}</span>
          </div>
          <p class="content-preview">{{ post.content }}</p>
          <div class="post-footer">
            <div class="author" v-if="post.user">
              <el-avatar :size="24" :src="post.user.avatar">
                {{ post.user?.nickname?.charAt(0) }}
              </el-avatar>
              <span>{{ post.user?.nickname }}</span>
            </div>
            <div class="stats">
              <span>{{ post.viewCount }} 阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGuide } from '@/ts/pages/guide'
import '@/css/pages/guide.css'

const { posts, goToDetail } = useGuide()
</script> 